<template>
  <div class="map" ref="map" :style="{height:height}"></div>
</template>
<script>
export default {
  data() {
    return {
      map: {}
    };
  },
  props: {
    height: {
      type: String,
      default: () => {
        return "885px";
      }
    }
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    //   初始化地图
    mapInit() {
      this.map = new AMap.Map(this.$refs["map"], {
        // 初始化生成地图
        resizeEnable: true,
        mapStyle: "amap://styles/darkblue",
      });
      let startIcon = new AMap.Icon({
        size: new AMap.Size(52, 52),
        // image: "/static/public/images/cameraIcon2.png",
        imageSize: new AMap.Size(26, 26)
      });
      // this.camera();
    },
    // 这个方法就是添加点**********************************
    addMarker(self, cameraObj, position, title, src) {
      var title =cameraObj.name,
        content = [];
      content.push("状态:在线，摄像头质量：优 ");
      // content.push(
      //   "<button>1号位显示</button><button  >2号位显示</button> <br/><button  >3号位显示</button><button >4号位显示</button>"
      // );
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: self.createInfoWindow(title, content.join("<br/>")),
        offset: new AMap.Pixel(-6, -35)
      });
      let marker = new AMap.Marker({
        map: self.map,
        //          icon: startIcon,
        position: position
      });

      AMap.event.addListener(marker, "mouseover", function() {
        infoWindow.open(self.map, marker.getPosition());
        self.pupoEven(cameraObj)
      });
      AMap.event.addListener(marker, "mouseout", function() {
        // self.map.clearInfoWindow();
      });
      let markerContent = document.createElement("div");
      markerContent.className = "cameraMarker"; // 设置描点img的统一样式
      let markerImg = document.createElement("img");
      markerImg.src = "";
      markerContent.appendChild(markerImg);
      // let cameraNameDiv = document.createElement("div");
      // cameraNameDiv.innerText = cameraObj.name;
      // markerContent.appendChild(cameraNameDiv);
      marker.setContent(markerContent);
      AMap.event.addListener(marker, "click", function() {
        // self.selectCamera = cameraObj;
        self.$emit("url", cameraObj);
        console.log(cameraObj)
        // self.cameraVideoVisible = true;
        // this.cameraEnlargeShow = true;
        // // 判断是否是机房门，机房门的分辨率 1280 720  其余是 1920 1080
        // // 机房门的缩放为0.7，根据缩放因子和宽高设置dialog的宽高
        // if (self.selectCamera.channelId === "BKY_204") {
        //   self.iframeWidth = 1280;
        //   self.iframeHeight = 720;
        //   self.scaleFactory = 0.7;
        // } else {
        //   self.iframeWidth = 1920;
        //   self.iframeHeight = 1080;
        //   self.scaleFactory = 0.5;
        // }
        // self.$nextTick(() => {
        //   const body = document.querySelector(".cameraDialog .el-dialog__body");
        //   body.style.height = self.iframeDialogHeight;
        // });
      });
    },
    // 关闭信息窗体
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
    //构建自定义信息窗体
    createInfoWindow(title, content) {
      var info = document.createElement("div");
      info.className = "custom-info input-card content-window-card";

      //可以通过下面的方式修改自定义窗体的宽高
      //info.style.width = "400px";
      // 定义顶部标题
      var top = document.createElement("div");
      var titleD = document.createElement("div");
      var closeX = document.createElement("span");
      top.className = "info-top";
      titleD.innerHTML = title;
      closeX.className='closes'
      closeX.innerHTML='X'
      // closeX.src = "/src/views/video/assets/mapClose.png";
      closeX.onclick = this.closeInfoWindow;

      top.appendChild(titleD);
      top.appendChild(closeX);
      info.appendChild(top);

      // 定义中部内容
      var middle = document.createElement("div");
      middle.className = "info-middle";
      middle.style.backgroundColor = "#182740";
      middle.style.color = "#fff";
      middle.style.textAlign = "center";
      middle.innerHTML = content;
      info.appendChild(middle);
      // 定义底部内容
      var bottom = document.createElement("div");
      bottom.className = "info-bottom";
      bottom.style.position = "relative";
      bottom.style.top = "-4px";
      bottom.style.margin = "0 auto";
      var sharp = document.createElement("span");
      sharp.className='triangle'
      // sharp.src = "../../assets/mapBottom.png";
      bottom.appendChild(sharp);
      info.appendChild(bottom);

      return info;
    },
    // 几号位置显示
    pupoEven(cameraObj){
      var self=this
        let btnArr = document.querySelectorAll(".scout .amap-overlays");
        var num = 0;
        for (let index = 0; index < btnArr.length; index++) {
          btnArr[index].onclick = function(e) {
            if (e.toElement.localName == "button") {
              switch (e.toElement.innerHTML) {
                case "1号位显示":
                  num = 0;
                  break;
                case "2号位显示":
                  num = 1;
                  break;
                case "3号位显示":
                  num = 2;

                  break;
                case "4号位显示":
                  num = 3;
                  break;
              }
              cameraObj.playbackUrl=cameraObj.url
               self.$emit('tabTarger',{
                url:cameraObj,
                index:num
              })
            }
         
          };
        }
      
    },
    //   相机请求
    camera() {
      let cameraListUrl = "/IVS/data/config/video_channel/get_channels.do";
      this.$axios
        .get(cameraListUrl, { params: null }) // { params: {analysisType:1} })
        .then(request => {
            this.cameraList = [];
          this.structurechannelid = [];
          this.facechannelid = [];
          const self = this;
          var regionArr = [];
          this.$emit("camerData", request.data);
          for (var i = 0; i < request.data.length; i++) {

            let lat = request.data[i].lat;
            let lng = request.data[i].lng;
            if (request.data[i].type == 0) {
              regionArr.push([lng, lat]);
            }

            let elem = {
              channelId: request.data[i].channelid,
              name: request.data[i].name,
              url: request.data[i].playbackUrl
            };
            this.cameraList.push(elem);
            if (lat != 0 && lng != 0) {
              this.addMarker(this, this.cameraList[i], [lng, lat], "", "");
            }
            }
           this.map.setFitView()
        })
        .catch(err => {
          console.info(err);
          if (err.response) {
            // alert("获取camera信息失败，请检查网络设置");
          }
        });
    }
  }
};
</script>
<style>
.map {
  width: 100%;
  z-index: 0;
}
.cameraMarker {
 
}
.custom-info {
  border: none;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 10px;
  left: 19px;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}
.closes {
  font-size: 20px;
  color: #ffffff !important;
  position: absolute;
  right: 5px;
  top: 2px;
}
.triangle {
  width: 0;
  height: 0;
  border-width: 12px;
  border-style: solid;
  border-color: #182740 transparent transparent transparent;
  position: absolute;
  left: 60px;
  bottom: -28px;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #3563aa !important;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}
button {
  background: #182740;
}
div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 60px;
}
.info-middle {
}
div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}
</style>
